<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-09-23 15:18:56
 * @LastEditTime: 2024-03-28 13:55:54
 * @FilePath: \client\src\components\global\ypdialog\ypdialog.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->
<template>
	<div class="absolute bg-black inset-0 bg-opacity-40 z-40" v-show="mask"></div>
	<div ref="dialog" class="dialog z-50" v-drag:drag="fullscreen" v-show="isLoad">
		<div ref="dialogHeader" class="flex p-3">
			<div class="font-bold">{{ title }}</div>
			<div class="flex-1 drag cursor-move"></div>
			<div class="flex items-center space-x-2">
				<i
					class="hover:text-red-700"
					:class="{ 'ri-fullscreen-exit-line': fullscreen, 'ri-fullscreen-line': !fullscreen }"
					@click.stop=";(fullscreen = !fullscreen), resetW()"
				></i>
				<i class="ri-close-line hover:text-red-700" @click="$emit('close')"></i>
			</div>
		</div>
		<div class="px-5 py-3 overflow-auto" :style="{ height: contentHeight }">
			<slot>默认内容</slot>
		</div>
	</div>
</template>
<script setup>
	import { onMounted, onUnmounted, ref, nextTick } from 'vue'
	const props = defineProps({
		isFull: { type: Boolean, default: false },
		width: null,
		mask: Number,
		title: { type: String, default: '标题内容' },
		top: {
			type: String,
			default: '20%'
		}
	})
	const emits = defineEmits(['close'])
	const fullscreen = ref(props.isFull || false)
	const dialog = ref(null)
	const dialogHeader = ref(null)
	const contentHeight = ref(0)
	const isLoad = ref(false)

	const resetW = async () => {
		if (fullscreen.value) {
			dialog.value.style.width = '100%'
			dialog.value.style.left = '0'
			dialog.value.style.right = '0'
			dialog.value.style.top = '0'
			dialog.value.style.bottom = '0'
			dialog.value.style.transform = 'translateX(0)'
		} else {
			dialog.value.style.width = props.width + 'px'
			dialog.value.style.left = '50%'
			dialog.value.style.top = props.top
			dialog.value.style.bottom = props.top
			dialog.value.style.transform = 'translateX(-50%)'
		}
		await nextTick()
		const allH = getComputedStyle(dialog.value).height
		const headerH = getComputedStyle(dialogHeader.value).height
		const style = getComputedStyle(document.documentElement)
		const pb = parseFloat(style.fontSize) * 0.75
		contentHeight.value = parseFloat(allH) - parseFloat(headerH) - pb + 'px'
	}
	onMounted(() => {
		isLoad.value = true
		resetW()
		window.addEventListener('resize', resetW)
	})
	onUnmounted(() => {
		window.removeEventListener('resize', resetW)
	})
</script>
